<template>
    <div class="min-h-screen bg-blue-50 flex items-center justify-center p-6">
      <div class="bg-white rounded-lg shadow-xl overflow-hidden max-w-md w-full">
        <div class="p-8">
          <h2 class="text-3xl font-bold text-blue-600 text-center mb-6">
            {{ isLogin ? '登录' : '注册' }}
          </h2>
          
          <form @submit.prevent="handleSubmit">
            <div class="space-y-4">
              <div v-if="!isLogin">
                <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                <input
                  id="username"
                  v-model="form.username"
                  type="text"
                  required
                  class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                />
              </div>
              
              <div>
                <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                <input
                  id="email"
                  v-model="form.email"
                  type="email"
                  required
                  class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                />
              </div>
              
              <div>
                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                <input
                  id="password"
                  v-model="form.password"
                  type="password"
                  required
                  class="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                />
                <p v-if="!isPasswordValid && !isLogin" class="mt-2 text-sm text-red-600">密码必须至少8位，且包含字母、数字和特殊字符</p>
              </div>
            </div>
            
            <button
              type="submit"
              class="mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300"
            >
              {{ isLogin ? '登录' : '注册' }}
            </button>
          </form>
          
          <div class="mt-4 text-center">
            <button
              @click="toggleForm"
              class="text-blue-600 hover:underline focus:outline-none"
            >
              {{ isLogin ? '没有账号？点击注册' : '已有账号？点击登录' }}
            </button>
          </div>
        </div>
      </div>
      <showMessage ref="showMessageRef" />
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import showMessage from './share/showMessage.vue' // 确保路径正确
  import { useAuthStore } from '@/stores/auth'
  import axiosClient from '@/utils/axios'
  import { isStrongPassword } from '@/utils/utils'

  const isLogin = ref(true)
  const showMessageRef = ref(null)
  const form = reactive({
    username: '',
    email: '',
    password: ''
  })
  const router = useRouter()
  
  const toggleForm = () => {
    isLogin.value = !isLogin.value
    // 切换表单时重置表单数据
    form.username = ''
    form.email = ''
    form.password = ''
  }
  
  const isPasswordValid = computed(() => {
    return isStrongPassword(form.password)
  })
  
  const handleSubmit = async () => {
    if (!isLogin.value && !isPasswordValid.value) {
      return
    }

    try {
      if (isLogin.value) {
        // 登录逻辑
        const authStore = useAuthStore();
        await authStore.login(form.email, form.password);
        // 登录成功后可以重定向到其他页面
        router.push('/bookCase')
      } else {
        // 注册逻辑
        await axiosClient.post('/users', {
          username: form.username,
          email: form.email,
          password: form.password
        })
        showMessageRef.value?.showMessage('注册成功', 'INFO')
        // 注册成功后可以切换到登录页面
        toggleForm()
      }
    } catch (error) {
      showMessageRef.value?.showMessage(error.response?.data?.detail || '注册失败', 'WARN')
    }
  }
  </script>